<template>
  <div class="c-flex-column c-justify-center c-aligni-center">
    <div
      class="c-mb20"
      v-for="(item, index) in ticketData"
      :key="index"
      @click.stop="slectTicket(index)"
    >
      <div
        class="c-flex-row billListWrap"
        :class="getDynamicClasses(item,index)"
      >
        <!-- 活动票据价格展示区域 -->
        <div class="billLeft c-p">
          <div
            class="c-fs38 c-fw600"
            v-if="item.price == 0"
            :class="item.number1 <= 0 || item.number1 < item.least?'c-fc-gray':'c-fc-ff4421'"
          >免费</div>
          <div
            class="c-fs24 c-fw600 c-p c-w100"
            :class="item.number1 <= 0 || item.number1 < item.least?'c-fc-gray':'c-fc-ff4421'"
            v-else
          >{{'￥' | iosPriceFilter}}<span :class="amountPrice(item).length >= 7 ?'c-fs34':'c-fs40'">{{amountPrice(item)}}</span>
            <span
              class="c-fs24 "
              v-if="item.mtkType == 2 && item.collage != null"
            >{{amountPriceText(item)}}</span>
          </div>
          <template v-if="!isSummitActivity && !isHideRemain">
            <div
              class="c-fs20 c-fc-gray c-text-ellipsis1 c-mt4"
              v-if="item.number1 <= 0"
            >已售空</div>
            <div
              class="c-fs20 c-fc-ff4421 c-text-ellipsis1 c-mt4"
              v-else
            >仅剩{{item.number1}}张票</div>
          </template>
          <span v-if="showOptimalPrice(item)" class="c-fc-ff4421 c-pa c-p-l0 c-p-t0 c-fs20 c-pv4 c-ph4 tagClass">
            <span v-if="item.optimal.optimalPrice != 0">{{item.optimal.optimalPriceType == 2 ? 'VIP' : item.optimal.optimalPriceType == 3 ? 'SVIP' : '专享价'}}{{'￥' | iosPriceFilter}}{{getOptimalPrice(item)}}</span>
            <span v-if="item.optimal.optimalPrice == 0">{{item.optimal.optimalPriceType == 2 ? 'VIP' : item.optimal.optimalPriceType == 3 ? 'SVIP' : '专享'}}免费</span>
          </span>
        </div>
        <!-- 活动票据信息展示区域 -->
        <div class="billRight c-ph24 c-pt16 c-pb24 c-w0">
          <div
            class="c-fs26 c-fw500 c-text-ellipsis2"
            :class="item.number1 <= 0 || item.number1 < item.least?'c-fc-gray':'c-fc-xblack'"
          >
            <span
              class="c-ph10 c-pv4 c-fs16 c-fc-white c-mr10 c-br4"
              :class="item.number1 <= 0 || item.number1 < item.least?'c-bg-gray':'c-bg-ff4421'"
              v-if="isMarketing(item)"
            >
              {{mtkTypeName(item)}}
            </span>
            {{item.name}}
          </div>
          <div
            class="c-fs20 c-fc-gray"
            v-if="isMarketing(item)"
          >原价：{{'￥' | iosPriceFilter}}{{Number(item.price).toFixed(2)}}</div>
          <span v-if="showDepartmentsPrice(item)" class="c-fs18 c-fc-ff4421">指定组织成员免费</span>

          <div
            class="c-fs18"
            :class="item.number1 <= 0 || item.number1 < item.least?'c-fc-gray':'c-fc-ff4421'"
            v-if="!isMarketing(item) && recType!=3"
          >
            <template v-if="item.optimal && [2, 3, 4].includes(item.optimal.optimalPriceType)">
              <span v-if="vipType == 2 && item.optimal.optimalPriceType == 2">
                {{item.vipDiscountType == 1 ?
                  (item.vipDiscount == 0? 'VIP专享免费' : item.vipDiscount == 100 ? '' : `VIP享${(item.vipDiscount / 10).toFixed(2)}折`) :
                  (Number(item.vipDiscountPrice) == 0 ? 'VIP专享免费' : Number(item.vipDiscountPrice) == Number(item.price) ? '' : `VIP享立减${Number(item.price) - Number(item.vipDiscountPrice)}元`)
                }}
              </span>
              <span v-if="vipType == 4 && item.optimal.optimalPriceType == 3">
                {{item.vipDiscountType == 1 ?
                  (item.svipDiscount == 0 ? 'SVIP专享免费' : item.svipDiscount == 100 ? "" : `SVIP享${(item.svipDiscount/10).toFixed(2)}折`) :
                  (Number(item.svipDiscountPrice) == 0 ? 'SVIP专享免费' : Number(item.svipDiscountPrice) == Number(item.price) ? "" : `SVIP享立减${Number(item.price) - Number(item.svipDiscountPrice)}元`)
                }}
              </span>
              <span v-if="item.commonProdInfo.agentDiscount != 100 && item.optimal.optimalPriceType == 4">
                {{item.commonProdInfo.agentName}}
                {{item.commonProdInfo.agentDiscount == 0 ? '专享免费' : `享${(item.commonProdInfo.agentDiscount * 0.1).toFixed(2)}折`}}
              </span>
            </template>
          </div>
          <div
            v-if="item.deductiblePoints && Number(item.deductiblePoints) > 0 && item.optimal && item.optimal.optimalPriceType != 101"
            class="c-fs18"
            :class="item.number1 <= 0 || item.number1 < item.least?'c-fc-gray':'c-fc-ff4421'"
          >
            {{companyAuth.integrateName1}}可抵 {{'￥' | iosPriceFilter}}{{item.deductiblePoints}}
          </div>
          <div
            class="c-fs18"
            :class="item.number1 <= 0 || item.number1 < item.least?'c-fc-gray':'c-fc-ff4421'"
            v-if="item.isAudit==1 && select==index"
          >该票种需要主办方审核</div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-pt18 c-bd-t1-f6">
            <div class="c-fs18 c-fc-gray">{{item.enrollStartAt | formatStringTime}} - {{item.enrollEndAt | formatStringTime}}</div>
            <div
              class="c-fs18 c-fc-gray"
              @click.stop="handleClickOpen(index)"
            >票券说明
              <i
                class="iconfont  c-fs18 c-fc-sgray"
                :class="item.isShow ? 'icon-shouqi':'icon-xiala1'"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div
        class="c-bg-white c-ph24 c-fs20 c-fc-gray billBottem c-pv20"
        v-show="item.isShow"
      >
        <p>{{item.desc == '' ?'暂无票券说明':item.desc}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "activityBillList",
  props: {
    ticketData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    groupId: {
      type: Number,
      default: -1
    },
    selectId: {
      type: String,
      default: ''
    },
    selectMtkType: {
      type: String,
      default: ''
    },
    vipType: {
      type: Number,
      default: 1
    },
    select: {
      type: Object,
      default: null
    },
    recType: {
      type: Number,
      default: 0
    },
    isSummitActivity: { // isSummitActivity 特定活动(5000人峰会),
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      tipMsg:'',
    }
  },
  computed: {
    //组织架构专享价免费
    showDepartmentsPrice() {
      return function (item) {
        return item.isDepartments == 1 && item.isUserInDepartment == 1;
      }
    },
    // 显示专享价格
    showOptimalPrice() {
      return function (item) {
        return item.optimal && item.optimal.optimalPriceType != 1 && !this.isMarketing(item);
      }
    },
    // 显示活动票据价格
    amountPriceText() {
      return function (item) {
        let text = '';
        if (this.isInCollage(item)) {
          // 先判断是阶梯还是普通
          if (item.collage.collageGrades && item.collage.collageGroupType == 2) {
            // 阶梯拼团
            if (this.groupId != -1) {
              // 去参团
              if (this.selectId == item.atId && this.selectMtkType == item.mtkType) {
                text = '';
              } else {
                text = item.collage.captainPriceType == 2 ? `起` : '';
              }
            } else {
              // 发起拼团
              text = item.collage.captainPriceType == 2 ? `起` : '';
            }
          }
        }
        return text;
      }
    },
    // 获取专享价格
    getOptimalPrice() {
      return function (item) {
        if (item.optimal && item.optimal.optimalPriceType != 1) {
          return item.optimal.optimalPrice
        }
      }
    },
    // 判断是否在限时折扣活动中
    isInSale() {
      return function (item) {
        return item.mtkType == 1 && item.sales != null && item.sales.sales.status == 2 && (item.sales.limit == 0 || item.sales.balance > 0);
      }
    },
    // 判断是否在拼团中
    isInCollage() {
      return function (item) {
        return item.mtkType == 2 && item.collage != null && item.collage.status == 2;
      }
    },
    // 判断是否在砍价中
    isInBargain() {
      return function (item) {
        return item.mtkType == 12 && item.bargain != null && (item.bargain.status == 2 || (item.bargain.isPreheat == 1 && item.bargain.status == 1));
      }
    },
    // 判断是否在推荐有礼中
    isInRecommend() {
      return function (item) {
        return Number(item.price) > 0 && this.recType == 3 && item.recommend.isExist;
      }
    },
    // 判断是否是营销活动 限时折扣/拼团/砍价/推荐有礼
    isMarketing() {
      return function (item) {
        let isMarketing = false;
        if (!item.optimal) {
          isMarketing =
            (this.isInSale(item)) ||
            (this.isInCollage(item)) ||
            (this.isInBargain(item)) ||
            (this.isInRecommend(item));
        } else {
          isMarketing =
            (item.optimal.optimalPriceType == 101 && this.isInSale(item)) ||
            (item.optimal.optimalPriceType == 102 && this.isInCollage(item)) ||
            (item.optimal.optimalPriceType == 112 && this.isInBargain(item));
        }
        return isMarketing;
      }
    },
    // 返回营销名称
    mtkTypeName() {
      return function (item) {
        if (!item) return false
        let name = '';
        let isSale = this.isInSale(item) && (!item.optimal || (item.optimal && item.optimal.optimalPriceType == 101));
        let isCollage = item.collage && item.collage.collageGrades && item.collage.collageGroupType == 2 && item.collage.collageGrades.length > 0 && (!item.optimal || (item.optimal && item.optimal.optimalPriceType == 102));
        let isBargain = this.isInBargain(item) && (!item.optimal || (item.optimal && item.optimal.optimalPriceType == 112));
        let isRecommend = this.isInRecommend(item);
        if (isSale) {
          name = '限时折扣';
        } else if (isCollage) {
          name = '阶梯拼团';
        } else if (isBargain) {
          name = '砍价购';
        } else if (isRecommend) {
          name = '好友推荐';
        } else {
          name = '拼团';
        }
        return name;
      }
    },
    amountPrice() {
      return function (item) {
        // 计算各种营销价格
        let price = '';
        if (this.isInCollage(item)) {
          // 先判断是阶梯还是普通
          if (item.collage.collageGrades && item.collage.collageGroupType == 2) {
            // 阶梯拼团
            if (this.groupId != -1) {
              // 去参团
              if (this.selectId == item.atId && this.selectMtkType == item.mtkType) {
                price = Number(item.collage.playersPrice).toFixed(2)
              } else {
                price = Number(item.collage.captainPrice).toFixed(2);
              }
            } else {
              // 发起拼团
              price = Number(item.collage.captainPrice).toFixed(2);
            }
          } else {
            // 普通拼团
            if (this.groupId != -1) {
              // 去参团
              if (this.selectId == item.atId && this.selectMtkType == item.mtkType) {
                price = Number(item.collage.playersPrice).toFixed(2)
              } else {
                price = Number(item.collage.captainPrice).toFixed(2);
              }
            } else {
              // 发起拼团
              price = Number(item.collage.captainPrice).toFixed(2)
            }
          }
        } else if (item.optimal && item.optimal.optimalPriceType == 101 && this.isInSale(item)) {
          price = Number(item.sales.price).toFixed(2);
        } else if (this.isInBargain(item)) {
          price = Number(item.bargain.reservePrice).toFixed(2);
        } else if (this.isInRecommend(item)) {
          price = Number(item.recommend.action.recommendPrice).toFixed(2);
        } else {
          price = Number(item.price).toFixed(2);
        }
        return price;
      }
    },
    isHideRemain() { // 是否隐藏剩余票券，特定公司（创客创始人IP俱乐部：x9vzap）需要隐藏
      const companyId = localStorage.getItem("companyId") || ''
      const hideRemainCompanyIds = ['x9vzap']
      return hideRemainCompanyIds.includes(companyId)
    },
  },
  watch: {
    // ticketData() {
    //   this.ticketData = this.ticketData.forEach((item, i) => {
    //     // this.$set(this.ticketData[i], 'isShow', true);
    //     item.isShow = true;
    //     return item
    //   });
    // },
  },
  filters: {
    formatStringTime(value) {
      if (value != undefined && value != "" && value != null) {
        return value.substr(0, 10).replace(/-/g, '.');
      } else {
        return value;
      }
    },
  },
  mounted() {
    this.ticketData.forEach((item, i) => {
      if (item.desc) {
        this.$set(this.ticketData[i], 'isShow', true);
      } else {
        this.$set(this.ticketData[i], 'isShow', false);
      }
    })
  },
  activated() {

  },
  methods: {
     getDynamicClasses(item, index) {
      let count = 0
      // 合伙人
      if (!this.isMarketing(item) && this.recType != 3 && item.optimal && [2, 3, 4].includes(item.optimal.optimalPriceType)) {
        count = count + 1
      }
      // 积分
      if (item.deductiblePoints && Number(item.deductiblePoints) > 0 && item.optimal && item.optimal.optimalPriceType != 101) {
        count = count + 1
      }
      // 主办方审核
      if (item.isAudit == 1 && this.select == index) {
        count = count + 1
      }
      let str = count >= 2 ? 'billListWrap2' : 'billListWrap'
      if (this.select == index) {
        str = str + ' active '
      }
      return str
    },
    slectTicket(index) {
       let least = this.ticketData[index].least;
      let remain = this.ticketData[index].number1;
      if (remain > 0 && remain >= least) {
         this.$emit("slectTicket", index);
        // 剩余票数小于最大限购数时最大值取剩余票数
      } else if (remain <= 0) {
        this.$cjConfirm({
          title: '提示',
          message: '不好意思，您选的票已售完',
          showCancelButton: false,
          clickCloseModal: false
        })
        return;
      } else if (remain < least) {
        this.$cjConfirm({
          title: '提示',
          message: '余票低于最少购买数量',
          showCancelButton: false,
          clickCloseModal: false
        })
        return;
      }
    },
    handleClickOpen(index) {
      if (this.ticketData[index].isShow == false) {
        this.$set(this.ticketData[index], 'isShow', true);
      } else {
        this.$set(this.ticketData[index], 'isShow', false);
      }
    },
  }
}
</script>

<style lang="less" scoped>
.billListWrap {
  width: 14.8rem;
  height: 4.7rem;
  background: url("../../assets/i/wap/activity/billwrap.png") no-repeat center
    center;
  background-size: cover;
  &.active {
    width: 14.8rem;
    height: 4.7rem;
    background: url("../../assets/i/wap/activity/billwrapActive.png") no-repeat
      center center;
    background-size: contain;
  }
  .billLeft {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 4.85rem;
    height: 4.7rem;
    text-align: center;
  }
  .billRight {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
  }
  .billLine {
    border: 0.025rem solid #f6f6f6;
  }
}
.billListWrap2 {
  width: 14.8rem;
  height: 6rem;
  background: url("../../assets/i/wap/activity/billwrap2.png") no-repeat center
    center;
  background-size: cover;
  &.active {
    width: 14.8rem;
    height: 6.25rem;
    background: url("../../assets/i/wap/activity/billwrapActive2.png") no-repeat
      center center;
    background-size: contain;
  }
  .billLeft {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 4.85rem;
    height: 6rem;
    text-align: center;
  }
  .billRight {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
  }
  .billLine {
    border: 0.025rem solid #f6f6f6;
  }
}
.billBottem {
  width: 14.8rem;
  height: auto;
  border-radius: 0.25rem;
  margin-top: 1px;
}
.tagClass{
  background-image: linear-gradient(270deg, #ff44210d 0%, #ff442133 100%);
  border-radius: 0.2rem 0  0.2rem 0;
}
</style>